import React from 'react'
import { Tabs, Table, Tag } from 'antd'
const { TabPane } = Tabs
export default (props:any) => {

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text: any) => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: (tags: any) => (
                <span>
                    {tags.map((tag: any) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </span>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text: any, record: any) => (
                <span>
                    <a style={{ marginRight: 16 }}>Invite {record.name}</a>
                    <a>Delete</a>
                </span>
            ),
        },
    ];

    const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
    ];


    return (
        <div>
            <div style={{ padding: "10px 0 0 10px", backgroundColor: "white" }}>
                <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "6px" }}>资产概况</nav>
                <ul style={{ display: "flex", margin: 0, padding: "15px" }}>
                    <li style={{ flex: 1 }}>
                        <div style={{ color: "#666666", fontSize: "14px" }}>可用余额（元）</div>
                        <div style={{ fontWeight: 700, fontSize: "20px" }}>0.00</div>
                    </li>
                    <li style={{ flex: 1 }}>
                        <div style={{ color: "#666666", fontSize: "14px" }}>已提现（元）/ 提现中（元）</div>
                        <div style={{ fontWeight: 700, fontSize: "20px" }}>0.00 / 0.00</div>
                    </li>
                    <li style={{ flex: 1 }}>
                        <div style={{ color: "#666666", fontSize: "14px" }}>入驻费用（元）</div>
                        <div style={{ fontWeight: 700, fontSize: "20px" }}>500.00</div>
                    </li>
                    <li style={{ flex: 1 }}>
                        <div style={{ color: "#666666", fontSize: "14px" }}>保证金（元）</div>
                        <div style={{ fontWeight: 700, fontSize: "20px" }}>0.00</div>
                    </li>
                </ul>
            </div>

            <div style={{ padding: "10px 0 0 10px", backgroundColor: "white", marginTop: "12px" }}>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="账户收支" key="1" >
                        <Table columns={columns} dataSource={data} />
                    </TabPane>
                    <TabPane tab="提现记录" key="2">

                    </TabPane>
                </Tabs >
            </div>
        </div>
    )
}